<template>
  <a-config-provider :locale="locale">
    <div class="main">
      <!-- 头部标题 -->

      <Head :isExtra="true" type="one" softName="" :isClick="false"></Head>
      <div class="content">
        <a-row :gutter="[12, 0]">
          <a-col class="leftTopWrap" :span="7">
            <a-row class="leftCennterItem mBtoom">
              <a-col class="headTitle" :span="24">
                <HeadTitle value="各部门风险作业数据" extra=""></HeadTitle>
              </a-col>
              <a-row class="backGradient" :gutter="[0, 0]">
                <a-col class="toTopWrap" :span="24">
                  <div class="showNumInfo" ref="jituanRef">
                    <a-row :ref="`jituanRef-height`" v-for="(item, index) in resData.groupRiskOperation"
                      :key="item.name + '' + index" style="" :gutter="[8, 5]">
                      <a-col class="numInfoWrap" :span="2"></a-col>
                      <a-col class="numInfoWrap" :span="20">
                        <div class="showNumInfoItem">
                          <div class="doc"></div>
                          <a-tooltip :title="item.name">
                            <div class="name">{{ item.name }}</div>
                          </a-tooltip>
                          <div class="progress">
                            <a-progress :stroke-color="{
                              '0%': '#C3AB81',
                              '100%': '#EDE4D3',
                            }" :percent="progress(item.num)" status="active" :showInfo="false" />
                          </div>
                          <div class="number">
                            <ZSCountTo :value="item.num"></ZSCountTo>
                          </div>
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                </a-col>
              </a-row>
            </a-row>
            <a-row class="leftBottomItem mBtoom">
              <a-col class="headTitle" :span="24">
                <HeadTitle value="当月每日运行情况"></HeadTitle>
              </a-col>
              <a-col :span="24">
                <div class="showChart backGradient" v-if="resData.groupRiskOperationDay">
                  <Echarts type="bar" :setting="{ label: false }" :data="resData.groupRiskOperationDay">
                  </Echarts>
                </div>
              </a-col>
            </a-row>
            <!-- @click="goReal('hidden')" -->
            <div class="leftBottomWrap hovers">
              <HeadTitle value="隐患排查治理"></HeadTitle>
              <div class="contentTable backGradient">
                <ZSTable :newRowData="newObj['hiddenflow']" scroolHeight="19vh" columnsName="hiddenFlow"
                  :data="resData.hiddenHazardControl" :isAutoPlay="true" :onRefresh="getTableData">
                </ZSTable>
              </div>
            </div>
          </a-col>
          <a-col class="centerTopWrap" :span="10">
            <div class="centerInfo" v-if="resData.accumulateRunning">
              <span style="margin-right: 18px">2025.5.17-至今</span>
              <span style="margin-right: 28px">累计安全运行</span>
              <span class="mRigntSmall AlibabaPuHuiTi">
                <ZSNumAni :number="Number(resData.accumulateRunning ? resData.accumulateRunning : 0)">
                </ZSNumAni>
              </span>
              <span class="subtitle mRignt">次</span>
            </div>
            <!-- <div class="topSwiper">
                            <ZSIcon icon="icon-shengyin_shiti" :styles="{ color: '#F1BE4B' }"></ZSIcon>
                            <span>火情高发时间段，请防范</span>
                        </div> -->
            <!-- 【山东省地图】 -->
            <div class="bottomMap mBtoom">
              <ZSMap></ZSMap>
              <div class="logo">
                <div class="logoLeftImg"></div>
              </div>
            </div>
            <a-row class="bottomBox">
              <!-- @click="goWork('')" -->
              <a-col class="headTitle hovers" :span="24" style="margin-bottom: 1vh">
                <HeadTitle value="本年度典型风险作业数据分析"></HeadTitle>
              </a-col>
              <a-col :span="24">
                <div class="itemBox backGradient">
                  <a-row :gutter="[0, 0]"
                    v-if="resData.groupRiskOperationAnalyse && Array.isArray(resData.groupRiskOperationAnalyse)">
                    <!-- @click="goWork(item.name)" -->
                    <a-col :span="6" v-for="(item, index) in resData.groupRiskOperationAnalyse"
                      :key="item.name + '' + index" class="hovers">
                      <div class="boxItemWrap" :class="index > 3 ? 'mTop' : ''">
                        <BoxRight>
                          <div class="itemWrap">
                            <div class="itemLeft">
                              <div class="itemLeftIcon" :class="`itemIcon${index}`"></div>
                            </div>
                            <div class="itemRight">
                              <div class="name">{{ item.name }}</div>
                              <div class="numberWrap">
                                <span class="number">
                                  <!-- <ZSCountTo :value="item.num"></ZSCountTo> -->
                                  {{ NumberFormatter(item.num) }}
                                </span>
                                <span style="font-size: 10.44px">次</span>
                              </div>
                              <!-- <div class="title">
                                                                平均审批时间：{{ item.bc }}
                                                            </div> -->
                            </div>
                          </div>
                        </BoxRight>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </a-col>
            </a-row>
          </a-col>
          <a-col class="rightTopWrap" :span="7">
            <div class="topSwiper" style="opacity: 0">
              <div style="margin-right: 12px">
                <ZSIcon icon="icon-shengyin_shiti" :styles="{ color: '#F1BE4B', fontSize: '13px' }">
                </ZSIcon>
              </div>
              <span class="info">火情高发时间段，请防范</span>
            </div>
            <a-row class="leftTopItem mBtoom">
              <a-col class="headTitle" :span="24">
                <HeadTitle value="当年月度风险作业数据趋势"></HeadTitle>
              </a-col>
              <a-col class="backGradient" :span="24">
                <div class="showChart">
                  <Echarts type="category" :setting="{ label: false, ...resData.groupRiskOperationTrend.setting }"
                    :data="resData.groupRiskOperationTrend.data">
                  </Echarts>
                </div>
              </a-col>
            </a-row>
            <div class="tabsWrap mBtoom">
              <HeadTitle value="本月风险作业数据分析"></HeadTitle>
              <a-row>
                <div class="tabsBox" style="height: 3.5vh; display: flex; align-items: center">
                  <a-tabs v-model="tabActive" :tabBarStyle="{ borderBottom: 'unset' }" type="card" @change="tabChange">
                    <a-tab-pane :key="index" :tab="item.name" v-for="(item, index) in tabList">
                    </a-tab-pane>
                  </a-tabs>
                </div>
                <div class="tabContentWrap backGradient">
                  <a-row :gutter="[24, 0]">
                    <a-col :span="6" v-for="(item, index) in types" :key="item + '' + index">
                      <div class="tabItem">
                        <BaseItem :label="item" :value="numberForGet(tabActive, index)"
                          :portName="resData.tabActiveName" :loading="getTabInfoLoading">
                        </BaseItem>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </a-row>
            </div>
            <!-- @click="goReal('real')" -->
            <div class="rightBottomWrap hovers">
              <HeadTitle value="风险作业管控"></HeadTitle>
              <div class="contentTable backGradient">
                <ZSTable :newRowData="newObj['raletime']" scroolHeight="19.5vh" columnsName="realTime"
                  :data="resData.riskOperationControl" :isAutoPlay="true" :onRefresh="getTableData"></ZSTable>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import ZSIcon from "@/components/ZSIcon/ZSIcon";
import FourBox from "./components/FourBox";
import HeadTitle from "./components/headTitle";
import Echarts from "./components/Echarts/Echarts";
import ZSTable from "./components/ZSTable/ZSTable";
import LineTime from "./components/lineTime.vue";

// 测试-数据
import { oneData, dataHandleF, dataFormaterF } from "./js/data";
import BoxNum from "@/components/ZSSwiper/components/BoxNum";
import BoxRight from "./components/ZSBoxItem/BoxRight";
import BaseItem from "./components/ZSBoxItem/BaseItem";
// 数字翻页效果
import ZSCountTo from "@/components/ZSCountTo/ZSCountTo";
import ZSNumAni from "@/components/ZSCountTo/ZSNumAni";
import Head from "./components/ScreenCommon/Head";
import ZSMap from "./components/ZSBoxItem/ZSMap";

export default {
  components: {
    ZSIcon,
    FourBox,
    HeadTitle,
    Echarts,
    ZSTable,
    BoxNum,
    LineTime,
    BoxRight,
    BaseItem,
    ZSCountTo,
    ZSNumAni,
    Head,
    ZSMap,
  },
  data() {
    return {
      locale: zhCN,
      types: [
        // 新-刘经理提出
        "动火作业",
        "有限空间",
        "高处作业",
        "吊装作业",
        "船只靠离泊",
        "检维修作业",
        "隐患排查",
        "其他作业",
      ],
      resData: {
        // 累计运行
        accumulateRunning: {
          YXTS: 0,
          YXCS: 0,
        },
        // 年累计作业数
        yearCumulative: 0,
        // 当年每月作业量
        groupRiskOperationTrend: {},
        // 当日各集团作业数量分析
        groupRiskOperation: [],
        // 当日各集团总作业数量对比
        groupRiskOperationDay: [],
        // tab下的数据
        monthflowforgroup: {},
        monthdes: {
          data: {},
        },
        raleTime: {
          data: [],
        },
        // 异常流程
        assignmentReview: [],
        // 隐患排查
        hiddenFlow: {
          data: [],
        },
        // 新-刘经理提出
        groupRiskOperationAnalyse: [
          {
            name: "动火作业",
            num: "0",
            id: "",
          },
          {
            name: "有限空间",
            num: "0",
            id: "",
          },
          {
            name: "高处作业",
            num: "0",
            id: "",
          },
          {
            name: "吊装作业",
            num: "0",
            id: "",
          },
          {
            name: "船只靠离泊",
            num: "0",
            id: "",
          },
          {
            name: "检维修作业",
            num: "0",
            id: "",
          },
          {
            name: "隐患排查",
            num: "0",
            id: "",
          },
          {
            name: "其他作业",
            num: "0",
            id: "",
          },
        ],
      },
      tabActive: 0,
      // 右侧tabs
      tabList: [],
      // 定时器
      // 运行数量定时器
      setIntName1: null,
      // tabs切换定时器
      setIntName2: null,
      // 异常流程滚动定时器
      setIntName3: null,
      // 今日各集团定时器
      setIntName4: null,
      // 月度作业分析定时器
      setIntName5: null,
      // 年累计各作业类型数据分析定时器
      setIntName6: null,
      // 今日各集团定时器
      setIntName7: null,
      //
      setTimeAllName: null,
      newObj: {
        hiddenflow: {},
        raletime: {},
      },
      // 获取数据的loading
      getTabInfoLoading: false,
    };
  },
  methods: {
    //
    NumberFormatter(s) {
      return Number(s);
      // 去掉千分符
      return Number(s).toLocaleString();
    },
    // 累计运行
    getAccumulated() {
      this.getAxios(this.$getAccumulated, {})
        .then((res) => {
          if (res.code == 200) {
            this.resData = {
              ...this.resData,
              getAccumulated: res.data,
            };
          }
        })
        .finally(() => {
          this.start();
        });
    },
    // 年累计作业数
    getYearCumulative() {
      this.getAxios(this.$getFlowForYear, {}).then((res) => {
        if (res.code == 200) {
          this.resData = {
            ...this.resData,
            yearCumulative: res.data,
          };
        }
      });
    },
    // 月度作业数量走势分析
    getmonthflowbyyear() {
      return;
      this.getAxios(this.$getmonthflowbyyear, {})
        .then((res) => {
          if (res.code == 200) {
            this.resData = {
              ...this.resData,
              monthFlowByYear: {
                ...this.resData.monthFlowByYear,
                ...dataHandleF("hasLine", res.data),
              },
            };
          }
        })
        .finally(() => {
          // if (this.setIntName6) {
          //   this.flowYearF();
          // }
        });
    },
    // 当日各集团总作业数量对比
    getMonthActive() {
      this.getAxios(this.$getdayflowbymonth, {})
        .then((res) => {
          if (res.code == 200) {
            this.resData = {
              ...this.resData,
              mounthActive: {
                ...this.resData.mounthActive,
                data: dataHandleF("bar", res.data),
              },
            };
          }
        })
        .finally(() => { });
    },
    // 各集团作业数量
    getflowforgroupday(aParams) {
      let params = {
        id: "",
        ...aParams,
      };
      this.getAxios(this.$getflowforgroupday, params)
        .then((res) => {
          if (res.code == 200) {
            this.resData = {
              ...this.resData,
              lowforgroupday: {
                ...this.resData.lowforgroupday,
                data: this.dataSortF(res.data),
              },
            };
          }
        })
        .finally(() => {
          this.jituanF();
        });
    },
    // 中部下8种作业方式
    getflowfor8type() {
      this.getAxios(this.$getflowfor8type, {})
        .then((res) => {
          if (res.code == 200) {
            this.resData = {
              ...this.resData,
              flowfor8type: {
                ...this.resData.flowfor8type,
                data: res.data,
              },
            };
          }
        })
        .finally(() => {
          if (this.setIntName5 != null) {
            this.typeF();
          }
        });
    },
    // 当月工单分析
    getmonthdes() {
      this.getAxios(this.$getmonthdes, {}).then((res) => {
        if (res.code == 200) {
          this.resData = {
            ...this.resData,
            monthdes: {
              ...this.resData.monthdes,
              data: res.data,
            },
          };
        }
      });
    },
    // 获取右侧tablist数据
    getonedept() {
      this.getAxios(this.$getonedept, {})
        .then((res) => {
          if (res.code == 200) {
            this.tabList = res.data;
            this.getmonthflowforgroup(res.data[0].name);
          }
        })
        .finally(() => { });
    },
    // 右侧tabs-数据
    getmonthflowforgroup(titleName, index = this.tabActive) {
      if (this.getTabInfoLoading) {
        return;
      }
      this.getTabInfoLoading = true;
      this.getAxios(this.$zsport8typeByMonth, { titleName: titleName })
        .then((res) => {
          if (res.code == 200) {
            let obj = {
              ...this.resData,
              monthflowforgroup: {
                ...this.resData.monthflowforgroup,
                [index]: res.data,
              },
              tabActiveName: titleName,
            };
            // data['monthflowforgroup'][index] = res.data;
            this.resData = obj;
          }
        })
        .finally(() => {
          this.getTabInfoLoading = false;
          this.tabs();
        });
    },
    // q弃用
    // 右下角实时数据
    getraletime(aParams) {
      return;
      let params = {
        id: "",
        ...aParams,
      };
      this.getAxios(this.$getraletime, params).then((res) => {
        if (res.code == 200) {
          if (params.id != "" && res.data.length == 1) {
            this.newObj["raletime"] = res.data[0];
          } else if (params.id == "" && res.data.length > 0) {
            let obj = {
              ...this.resData,
              raleTime: {
                ...this.resData.raleTime,
                data: dataFormaterF(res.data),
              },
            };
            this.resData = obj;
          }
        }
      });
    },
    // q弃用
    // 左下角隐患排查
    gethiddenflow(aParams) {
      return;
      let params = {
        id: "",
        ...aParams,
      };
      this.getAxios(this.$gethiddenflow, params).then((res) => {
        if (res.code == 200) {
          if (params.id != "" && res.data.length == 1) {
            this.newObj["hiddenflow"] = res.data[0];
          } else if (params.id == "" && res.data.length > 0) {
            let obj = {
              ...this.resData,
              hiddenFlow: {
                ...this.resData.raleTime,
                data: dataFormaterF(res.data),
              },
            };
            this.resData = obj;
          }
        }
      });
    },
    // 弃用
    // 异常流程
    getexpflow() {
      return;
      this.getAxios(this.$getremarkflow, {})
        .then((res) => {
          if (res.code == 200) {
            let obj = {
              ...this.resData,
              assignmentReview: {
                ...this.resData.assignmentReview,
                data: res.data,
              },
            };
            this.resData = obj;
          }
        })
        .finally(() => {
          this.yichangF();
        });
    },
    // 隐患排查治理和风险作业管控 合并为一个
    getTableData(aParams) {
      return;
      let params = {
        id: "",
        ...aParams,
      };
      this.getAxios(this.$riskControlList, params).then((res) => {
        if (res.code == 200) {
          if (params.id != "") {
            if (res.data.hiddenHazardControl.length > 0) {
              this.newObj["hiddenflow"] = res.data.hiddenHazardControl[0];
            }
            if (res.data.riskOperationControl.length > 0) {
              this.newObj["raletime"] = res.data.riskOperationControl[0];
            }
          } else if (params.id == "") {
            let obj = {
              ...this.resData,
              hiddenFlow: {
                ...this.resData.raleTime,
                data: dataFormaterF(res.data.hiddenHazardControl),
              },
              raleTime: {
                ...this.resData.raleTime,
                data: dataFormaterF(res.data.riskOperationControl),
              },
            };
            this.resData = obj;
          }
        }
      });
    },
    // 计算进度条的值
    progress(val) {
      let res = 0;
      if (val != 0) {
        let allNum;
        let arr = this.resData.groupRiskOperation;
        arr = arr.map((val) => Number(val.num));
        allNum = arr.reduce((acc, curr) => acc + curr, 0);
        res = Math.round((val / allNum) * 100);
      }
      return res;
    },
    // 数字格式化
    formate(num = 0, type) {
      return Math.round(num, type);
    },
    // tabs修改
    tabChange(e) {
      this.tabActive = e;
      let obj = this.tabList.find((val, ind) => ind == e);
      this.getmonthflowforgroup(obj.name, e);
    },
    // 类型 右侧中部
    numberForGet(aTab, i) {
      let num = 0;
      let arr = this.resData.monthflowforgroup[aTab];
      if (Array.isArray(arr) && arr[i] != null && typeof arr[i] == "object") {
        num = arr[i].num || 0;
      }
      return num;
    },
    // 数据排序
    dataSortF(arr) {
      let array = JSON.parse(JSON.stringify(arr));
      array = array.sort((a, b) => Number(b.num || 0) - Number(a.num || 0));
      return array;
    },
    // 当日各集团总作业数量对比 滚动
    goToTop(n = 0) {
      // 获取当前滚动条位置
    },
    // 向上滚动
    scroolTop(r, names) {
      // 获取当前滚动条的位置
      let refsEl = this.$refs[r];
      let elArr = this.$refs[`${r}-height`];
      if (elArr.length <= 0) {
        return;
      }
      let h = elArr[0].offsetHeight;
      if (r == "assignmentReview") {
        h = (window.innerHeight / 100) * 4;
      } else if (r == "jituanRef") {
        h = (window.innerHeight / 100) * 3.5 + 5;
      }
      // 当前滚动条位置
      let nowPosition = refsEl.scrollTop;
      let toScroop = h;
      // 滚动条最大高度
      var maxScrollTop = refsEl.scrollHeight - refsEl.clientHeight;
      if (nowPosition == 0) {
      } else {
        // 向上取整
        let snum = Math.ceil(nowPosition / h);
        toScroop = (snum + 1) * h;
      }
      if (toScroop > maxScrollTop) {
        toScroop = 0;
      }
      if (refsEl) {
        refsEl.scrollTo({
          top: toScroop,
          behavior: "smooth",
        });
        if (toScroop == 0) {
          this.end(names);
          // if (r == "assignmentReview") {
          //   this.getexpflow();
          // } else if (r == "jituanRef") {
          //   this.getflowforgroupday();
          // }
        }
      }
    },
    // 月度作业数量走势分析
    // flowYearF() {
    //   this.end("setIntName6");
    //   this.setIntName6 = setInterval(() => {
    //     this.getmonthflowbyyear();
    //   }, 12000);
    // },
    // 底部8种类型定时器
    typeF() {
      this.end("setIntName5");
      this.setIntName5 = setInterval(() => {
        this.getflowfor8type();
      }, 4000);
    },
    // 当日各集团总作业数量对比
    jituanF() {
      this.end("setIntName4");
      this.setIntName4 = setInterval(() => {
        this.scroolTop("jituanRef", "setIntName4");
      }, 60000);
    },

    // 异常流程定时器
    yichangF() {
      this.end("setIntName3");
      this.setIntName3 = setInterval(() => {
        this.scroolTop("assignmentReview", "setIntName3");
      }, 20000);
    },
    // tabs的定时器
    tabs() {
      return
      this.end("setIntName2");
      // tab切换
      this.setIntName2 = setInterval(() => {
        let tabA = this.tabActive + 1;
        if (tabA >= this.tabList.length) {
          tabA = 0;
        }
        this.tabChange(tabA);
      }, 60000);
    },
    // 定时器
    start() {
      this.end("setIntName1");
      this.setIntName1 = setInterval(() => {
        // this.getDataF();
        // 运行数量
        this.getAccumulated();
      }, 6000);
    },
    end(names) {
      if (names) {
        clearTimeout(this[names]);
        this[names] = null;
      } else {
        clearTimeout(this.setIntName1);
        clearTimeout(this.setIntName2);
        clearTimeout(this.setIntName3);
        clearTimeout(this.setIntName4);
        clearTimeout(this.setIntName5);
        clearTimeout(this.setIntName6);
        clearTimeout(this.setIntName7);
        clearTimeout(this.setIntName8);
        this.setIntName1 = null;
        this.setIntName2 = null;
        this.setIntName3 = null;
        this.setIntName4 = null;
        this.setIntName5 = null;
        this.setIntName6 = null;
        this.setIntName7 = null;
        this.setIntName8 = null;
      }
    },
    getDataF(types) {
      this.getDataObj(types);
      // this.getTableData();
      // 运行数量
      // this.getAccumulated();
      // 月度作业数量走势分析
      // this.getmonthflowbyyear();
      // this.getYearCumulative();
      // 当日各集团总作业数量对比
      // this.getMonthActive();
      // 各集团作业数量
      // this.getflowforgroupday();
      // 底部8种
      // this.getflowfor8type();
      // 当月工单分析
      // this.getmonthdes();
      // 获取右侧的tablist数据
      // this.getonedept();
      // 右下角实时数据
      // this.getraletime();
      // 异常流程
      // this.getexpflow();
      // 隐患排查
      // this.gethiddenflow();
      this.getRefData();
      // 接口合二为一
    },
    getRefData() {
      clearTimeout(this.setTimeAllName);
      this.setTimeAllName = null;
      this.setTimeAllName = setTimeout(() => {
        this.getDataF();
        // 半小时全部刷新一次
      }, 1800000);
    },
    onRefreshGetData(e) {
      let { type, id } = e;
      let params = {
        id: id,
      };
      if (type == "map") {
        // this.getflowforgroupday(params);
        if (id) {
          this.getTableData(params);
          // this.getraletime(params);
          // this.gethiddenflow(params);
        }
        // this.flowYearF();
      } else if (type == 'data') {
        // 刷新 合并成一个接口问题
        this.getDataObj();
      }
      // this.getmonthflowbyyear();
    },
    goWork(Str) {
      let query = {
        type: Str,
      };
      if (Str) {
        this.$router.push({ path: "/work", query: query });
      } else {
        this.$router.push({ path: "/work" });
      }
    },
    goReal(type) {
      this.$router.push({
        path: "/real",
        query: {
          type: type,
        },
      });
    },
    // 新新新新新新新新新
    getDataObj(types) {
      let params = {};
      this.getAxios(this.$zsriskControlSynthetical, params)
        .then((res) => {
          if (res.code == 200) {
            this.resData = {
              ...this.resData,
              ...res.data,
              groupRiskOperation: this.dataSortF(res.data.groupRiskOperation) || [],
              groupRiskOperationDay: dataHandleF("bar", res.data.groupRiskOperationDay) || [],
              groupRiskOperationTrend: {
                ...res.data.groupRiskOperationTrend,
                ...dataHandleF("hasLine", res.data.groupRiskOperationTrend),
              },
            }
            this.tabList = res.data.groupRiskOperation
            // 
            if (types == 'first') {
              this.getmonthflowforgroup(res.data.groupRiskOperation[0].name);
            }
          }
        })
        .finally(() => {
          // this.end('setIntName8');
          // this.setIntName8 = setTimeout(() => {
          //   this.getDataObj();
          // }, 30000);
        });
    },
  },
  created() {
    // 左上角和右上角
    this.$bus.$on("onRefresh", this.onRefreshGetData);
    this.end();
  },
  mounted() {
    // 判断是不是手机端访问，是手机端跳转到选择组织架构页面
    if (window.innerWidth <= 800) {
      this.$router.replace({ path: "/organization" });
    } else {
      this.getDataF('first');
    }
  },
  destroyed() {
    this.end();
    setTimeout(() => {
      this.end();
    }, 60000)
    this.$bus.$off("onRefresh");
  },
};
</script>

<style lang="less" scoped>
::v-deep {
  .extraRight {
    display: none !important;
  }
}

.AlibabaPuHuiTi {
  font-family: AlibabaPuHuiTi;
}

.main {
  width: 100vw;
  height: 100vh;
  background-image: url(~@/assets/images/ZhouShan/mainBack.jpg);
  background-color: rgba(10, 20, 39, 0.95);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  box-sizing: border-box;
  overflow: hidden;
}

.main>.top {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 18px;
  // 高度---标题
  height: 12vh;
  box-sizing: border-box;
  color: #fff;
  position: relative;
  // background-image: url(~@/assets/images/screen/headBk.png);
  background-size: 100% 100%;
  align-items: center;

  .extraRight {
    position: absolute;
    top: 2vh;
    width: 18vw;
    height: 60px;
    overflow: hidden;
    right: 2vw;
    display: flex;
    // justify-content: space-between;
    justify-content: center;
    align-items: center;

    .times {
      width: 120px;
    }

    .line {
      height: 40px;
      width: 2px;
      background-color: #495f73;
    }

    .weather {
      width: 8vw;
      text-align: right;
    }
  }

  .title {
    font-size: 32px;
    font-weight: 1000;
    -webkit-background-clip: text;
    background-clip: text;
    color: #ffffff;
  }

  .btns {
    position: absolute;
    right: 40px;
  }
}

.leftTopWrap {
  height: 88vh;

  // 55
  .showNum {
    height: 10vh;
    width: 100%;
    padding: 2px;

    .number {
      height: 100%;
      width: 100%;
      background-color: rgba(9, 53, 99, 0.6);

      display: flex;
      justify-content: center;
      align-items: center;

      .times {
        color: #1af8fe;
        margin-right: 0.7vw;
        font-size: 2.4vw;
        font-weight: 600;
      }

      .subtitle {
        color: #ffffff;
        font-size: 1.3vw;
        margin-top: 1.1vh;
      }
    }
  }

  .leftCennterItem {
    .showChart {
      height: 21vh;
    }

    .toTopWrap {
      margin: 1vh 0px;

      .showNumInfo {
        width: 100%;
        height: calc(20vh);
        overflow-y: auto;
        overflow-x: hidden;

        .numInfoWrap {
          .showNumInfoItem {
            // border: 1px solid #567187;
            background: rgba(86, 113, 135, 0.1);
            height: 3.5vh;
            display: flex;
            cursor: default;

            .doc {
              width: 0.3vw;
              height: 0.3vw;
              background-color: #F6C284;
              margin: auto 1.5vw;
              border-radius: 50px;
              box-shadow: 0px 0px 4px 4px rgba(246, 194, 132, 0.36);
            }

            .name {
              color: #ffffff;
              width: 4.5vw;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              margin-right: 8px;
              text-align: right;
              display: inline-block;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              line-height: 3vh;
            }

            .progress {
              width: 12vw;
              display: flex;
              align-items: center;
            }

            .number {
              display: flex;
              width: 4vw;
              justify-content: center;
              align-items: center;
              color: #F6C284;
              text-shadow: 0px 2px 2px #F6C284;
            }
          }
        }
      }
    }
  }

  .leftBottomItem {

    .showChart {
      height: 29vh;
      // background-color: rgba(9, 53, 99, 0.6);
    }

    .contentWrap {
      height: calc(12vh);
      overflow-y: auto;
      // margin-top: 0.5vh;

      .contentItem {
        display: flex;
        height: 4vh;
        justify-content: center;
        align-items: center;
        padding: 2px 0px;
        color: rgba(248, 200, 111, 1);

        .iconWrap {
          width: 3vw;
          display: flex;
          align-items: center;
          justify-content: center;

          .icon {
            width: 1.25vw;
            height: 1.25vw;

            background-image: url(~@/assets/images/screen/icon/jinggao.png);
            background-size: 100% 100%;
          }
        }

        .name {
          margin: 0px 4px;
          width: 60px;
        }

        .title {
          width: calc(100% - 6vw - 14px);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          max-height: 3em;
          /* 高度为行高的2倍 */
          line-height: 1.5em;
          text-overflow: ellipsis;
          font-size: 13px;
          padding-right: 20px;
        }

        .time {
          font-size: 12px;
        }

        @media screen and (max-width: 1650px) {
          .title {
            font-size: 12px;
          }
        }

        .options {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 64px;

          .optionBtn {
            margin: 0px;
            color: rgba(0, 240, 255, 1);
            border-color: rgba(0, 56, 255, 0.5);
          }

          .optionBtn:hover {
            border-color: rgba(0, 56, 255, 1);
          }

          .gradient-border-button {
            color: rgba(0, 240, 255, 1);
            border: none;
            background-image: linear-gradient(to right, #ffc107, #ff5722);
            background-clip: border-box;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: background-position 0.5s ease;
          }

          .gradient-border-button:hover {
            background-position: right center;
          }
        }
      }
    }
  }

  // 左下角表格
  .leftBottomWrap {
    .contentTable {
      margin-top: 1vh;
      position: relative;
      height: 18.5vh;
      width: calc(100% - 6px);
      margin-left: 6px;
      padding-bottom: 4px;
    }
  }
}

.centerTopWrap {
  height: 90vh;
  position: relative;

  .centerInfo {
    // position: absolute;
    position: relative;
    height: 8vh;
    width: 74%;
    margin-left: 13%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9vw;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 3px;
    // background-image: url(~@/assets/images/screen/titleBk.png);
    // background-size: 100% 100%;

    .mRignt {
      margin-right: 0.6vw;
    }

    .mRigntSmall {
      margin-right: 0.3vw;
      font-size: 32px;
      color: #FEC86A;

      ::v-deep {
        .scroll-number ul li {
          width: 24px;
          // height: 30px;
          margin: 0px 1px;

          .num-box .num-container span {
            color: #FEC86A;
            background-image: url(~@/assets/images/ZhouShan/numberBK.png);
            background-size: 100% 100%;
            // padding: 4px;
            font-size: 28px;
            display: flex;
            justify-content: center;
            width: 100%;
          }
        }
      }
    }

    .subtitle {
      font-size: 1.2vw;
    }
  }

  .centerInfo::after {
    content: "";
    height: 2px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url(~@/assets/images/screen/numTopBk.png);
    background-size: 100% 100%;
  }

  .bottomMap {
    height: 52vh;
    width: 100%;
    position: relative;

    .logo {
      opacity: 0.8;
      position: absolute;
      width: 12vw;
      height: 20vh;
      bottom: 2px;
      right: 4vw;
      background-image: url(~@/assets/images/screen/logo.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }

  .mTop {
    margin-top: 1vh !important;
  }

  .bottomBox {
    .itemBox {
      height: calc(20vh);

      .boxItemWrap {
        height: calc(8.5vh);
        margin: 0.5vh 4px 0.5vh 4px;

        .itemWrap {
          display: flex;
          height: 100%;
          width: 100%;

          .itemLeft {
            flex-shrink: 2;
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .itemLeftIcon {
              width: 60px;
              height: 60px;
              background-size: 100% 100%;
            }

            .itemIcon0 {
              background-image: url(~@/assets/images/ZhouShan/iconFir.png);
            }

            .itemIcon1 {
              background-image: url(~@/assets/images/ZhouShan/iconSet.png);
            }

            .itemIcon2 {
              background-image: url(~@/assets/images/ZhouShan/iconDiao.png);
            }

            .itemIcon3 {
              background-image: url(~@/assets/images/ZhouShan/iconBox.png);
            }

            .itemIcon4 {
              background-image: url(~@/assets/images/ZhouShan/iconShip.png);
            }

            .itemIcon5 {
              background-image: url(~@/assets/images/ZhouShan/iconLower.png);
            }

            .itemIcon6 {
              background-image: url(~@/assets/images/ZhouShan/iconAddress.png);
            }

            .itemIcon7 {
              background-image: url(~@/assets/images/ZhouShan/iconOther.png);
            }

            // '动火作业': '~@/assets/images/screen/icon/iconFir.png',
            // '检维修作业': '~@/assets/images/screen/icon/iconSet.png',
            // '吊装作业': '~@/assets/images/screen/icon/iconDiao.png',
            // '有限空间': '~@/assets/images/screen/icon/iconBox.png',
            // '船只靠离泊': '~@/assets/images/screen/icon/iconShip.png',
            // '下舱作业': '~@/assets/images/screen/icon/iconLower.png',
            // '巡检巡查': '~@/assets/images/screen/icon/iconAddress.png',
            // '其他作业': '~@/assets/images/screen/icon/iconOther.png'

            @keyframes rotate {
              from {
                transform: rotateY(0deg);
              }

              to {
                transform: rotateY(360deg);
              }
            }
          }

          .itemRight {
            flex-shrink: 1.5;
            width: 100%;
            display: flex;
            flex-direction: column;
            color: #ffffff;
            align-items: start;
            justify-content: center;

            .numberWrap {
              margin-bottom: 4px;
              color: #F6C284;

              .number {
                font-size: 20px;
                font-weight: 700px;
                // color: rgba(0, 224, 255, 1);
                margin-right: 4px;
              }
            }

            .name {
              font-size: 15px;
              font-weight: 700;
              margin-top: 1.5vh;
            }

            .title {
              font-size: 10.7px;
              color: rgba(0, 224, 255, 1);
            }
          }
        }
      }
    }
  }
}

.rightTopWrap {
  height: 90vh;
  position: relative;

  .topSwiper {
    position: absolute;
    top: -3.5vh;
    height: 3vh;
    width: 100%;
    margin-left: 10%;
    background-image: url(~@/assets/images/screen/subtitleBk.png);
    background-size: 100% 100%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 2px;

    .info {
      font-weight: 500;
      font-size: 14px;
    }
  }

  .leftTopItem {
    margin-top: 1vh;

    .showChart {
      height: 20vh;
    }
  }

  .tabsWrap {
    ::v-deep {
      .ant-tabs-nav-container {
        display: flex;
        align-items: center;
      }

      .ant-tabs-tab {
        background: transparent;
        background-image: url(~@/assets/images/ZhouShan/tabBk.png);
        background-size: 100% 100%;
        border: none;
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        // width: 100px;
        min-width: 100px;
        height: 28px;
        padding: 0px 20px 0px 24px;
        line-height: 28px !important;
        text-align: center;
      }

      .ant-tabs-tab-active {
        background: transparent;
        padding: 0px 0px 0px 24px;
        background-image: url(~@/assets/images/ZhouShan/tabBkActive.png);
        background-size: 100% 100%;
        border: none;
        color: #ffffff !important;
        font-weight: 500;
        font-size: 16px;
        width: auto;
        padding: 0px 20px 0px 24px;
        line-height: 28px !important;
      }

      .ant-tabs-tab-prev,
      .ant-tabs-tab-next {
        height: 28px;
        color: #ffffff;
      }

      .ant-tabs-nav-container {
        // padding-left: 0px;
      }

      .ant-tabs-bar {
        margin-bottom: 0px;
      }
    }

    .tabContentWrap {
      height: 26vh;
      // background: linear-gradient(to top, rgba(32, 63, 125, 0.7), rgba(32, 63, 125, 0));

      ::v-deep {
        .ant-row {
          margin: 0px;
          padding: 0px 16px;
        }
      }

      .tabItem {
        width: 100%;
        height: 11vh;
        margin: 1vh 0px;
      }
    }
  }

  // 右下角表格
  .rightBottomWrap {
    .contentTable {
      margin-top: 1vh;
      position: relative;
      height: 19vh;
      width: calc(100% - 6px);
      margin-right: 6px;
      padding-bottom: 4px;
    }
  }
}

.leftBottomWrap {
  height: 32vh;
}

.headTitle {
  height: 4vh;
  width: 100%;
}

// 背景渐变
.backGradient {
  // background: linear-gradient(to top, rgba(32, 63, 125, 0.7), rgba(32, 63, 125, 0));
  background: linear-gradient(0deg, rgba(180, 171, 155, 0.12));
}

.mBtoom {
  margin-bottom: 2.5vh;
}

::v-deep {
  .ant-progress-inner {
    background-color: rgba(106, 110, 115, 0.2);
    /* 这里设置你想要的颜色 */
  }
}

.main {

  // 滚动条样式
  /* 滚动条轨道样式 */
  ::-webkit-scrollbar {
    width: 0px;
    /* 设置滚动条宽度 */
  }

  /* 滚动条滑块样式 */
  ::-webkit-scrollbar-thumb {
    background-color: #888;
    /* 设置滑块背景颜色 */
    border-radius: 4px;
    /* 设置滑块圆角 */
  }

  /* 滚动条轨道hover状态样式 */
  ::-webkit-scrollbar-track:hover {
    background-color: #f1f1f1;
    /* 设置轨道hover状态时的背景颜色 */
  }

  /* 滚动条滑块hover状态样式 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* 设置滑块hover状态时的背景颜色 */
  }
}

// 累计数字滚动效果
::v-deep {
  .scroll-number {
    ul {
      padding: 0px;
    }

    ol,
    ul,
    dl {
      margin: 0px;
    }
  }

  .scroll-number ul li .num-box .num-container span {
    font-size: 32px;
    color: rgba(0, 224, 255, 1);
    font-weight: 10000;
  }
}
</style>
